@use '../../design-system' as *;

.container {
    --avatar-size: #{$spacing-size-16};

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
    list-style: none;

    @media screen and (min-width: $breakpoint-quotes-medium) {
        flex-direction: row;
        align-items: flex-start;
        gap: $spacing-size-6;
    }

    @media screen and (min-width: $breakpoint-quotes-large) {
        --avatar-size: #{$spacing-size-24};

        gap: $spacing-size-10;
    }

    blockquote {
        --quote-background-color: var(--color-util-gray-200);

        position: relative;
        margin-bottom: $spacing-size-6;
        padding: $spacing-size-4 $spacing-size-6;
        background-color: var(--quote-background-color);
        border-radius: var(--radius-md);
    }

    figure {
        max-width: 40em;
        margin-bottom: $spacing-size-12;

        li:last-child & {
            margin-bottom: 0;
        }
    }

    blockquote p {
        position: relative;

        &:before {
            content: open-quote;
            position: absolute;
            left: -0.4em;
        }

        &:after {
            content: close-quote;
        }
    }

    figcaption {
        display: grid;
        grid-template-columns: var(--avatar-size) auto;
        column-gap: $spacing-size-2;
        grid-template-rows: auto;
        grid-template-areas:
            'avatar name'
            'avatar orgContainer';
        line-height: var(--text-lh-ultra-tight);
    }

    @media screen and (max-width: $breakpoint-quotes-large) {
        li:nth-child(even) {
            .quoteBubbleTail {
                transform: scale(-1, 1);
                left: auto;
                right: var(--avatar-size);
            }

            figcaption {
                grid-template-areas:
                    'name avatar'
                    'orgContainer avatar';
                grid-template-columns: auto var(--avatar-size);
                text-align: right;
            }

            .orgContainer {
                justify-content: flex-end;
            }
        }
    }
}

.quoteBubbleTail {
    position: absolute;
    width: 18px;
    height: 22px;
    bottom: -$spacing-size-4;
    left: var(--avatar-size);
    fill: var(--quote-background-color);

    @media screen and (min-width: $breakpoint-quotes-large) {
        bottom: -22px;
    }
}

.avatar {
    grid-area: avatar;
    width: var(--avatar-size);
    height: var(--avatar-size);
    margin-right: $spacing-size-2;
    border-radius: var(--radius-full);
}

.name {
    grid-area: name;
    align-self: end;
}

.orgContainer {
    grid-area: orgContainer;
    align-self: start;
    display: flex;
    align-items: center;
    gap: $spacing-size-1;
}

.orgIcon {
    width: 18px;
    height: 18px;
    border-radius: 2px;
}
